<script setup lang="ts">
const props = defineProps<{
  selectedIndex: number
  items: string[]
}>()

defineEmits(['change'])

function getItemPercentageWidth() {
  return `${1 / props.items.length * 100}%`
}
</script>

<template>
  <view class="relative flex rounded-full bg-white">
    <view
      class="absolute top-0 h-88rpx rounded-full bg-#3F8BF6 transition-all duration-300 ease-out"
      :style="{
        left: `${(1 / props.items.length * 100) * selectedIndex}%`,
        width: getItemPercentageWidth(),
      }"
    />
    <view
      v-for="(item, index) in props.items"
      :key="index"
      class="relative z-10 h-88rpx flex items-center justify-center"
      :style="{
        width: getItemPercentageWidth(),
        color: selectedIndex === index ? 'white' : 'black',
      }"
      @tap="$emit('change', index)"
    >
      {{ item }}
    </view>
  </view>
</template>
